<template>
	<view class="transaction_details_warp">
		<Header leftPathType="switchTab" leftPath="/pages/mine/mine" :title="$t('mine.other.functions.transaction.details')" titleColor="#000000" leftType="h"/>
		<view class="transaction_details_content">
			<view class="_details_content_header">
				<view 
					:class="tabSelect === item.id ? '_content_header_item _content_header_item_select':'_content_header_item'" 
					@click="checkTab(item.id)" 
					v-for="item in tabList" 
					:key="item.id"
				>
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="_details_content_info">
			<view class="_content_info_title" v-if="[1,2].includes(tabSelect)">{{$t('mine.transaction.details')}}</view>
			<CardComm @getSelectCard="getSelectCard" v-if="[1,2].includes(tabSelect)" />
			<view class="_content_info_title2" v-if="[1,4].includes(tabSelect)" style="margin-top: 20rpx;">{{$t('details.historical.details')}}</view>
			<view class="_content_info_title2" v-else>{{$t('details.historical.recharge')}}</view>
			<!-- 卡片充值 -->
			<view class="_content_consumption_record"  v-if="tabSelect === 2">
				<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 280px)'}">
					<view class="_content_consumption_record_item" v-for="item in consumptionRecordList" :key="item.id" v-if="consumptionRecordList && consumptionRecordList.length !==0">
						<view class="">
							<view class="_record_item_title">{{$t('common.order')}}{{item.orderNo}}</view>
							<view class="_record_item_value">{{formatDate(item.ctdate)}}</view>
						</view>
						<view> 
							<view class="_record_item_title" style="text-align: right;">
								<text>{{item.amount}}</text>
								<text>USDT</text>
							</view>
							<view class="_record_item_value _record_item_value_right">{{getValue(RECHARGE_STATUS,item.status)}}</view>
						</view>
					</view>
					<view v-else class="not_data_warp">
						 <up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
						 <view class="not_data_msg_warp">{{$t('details.historical.details.no')}}</view>
					</view>
					<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
				</scroll-view>
			</view>
			<!-- 余额充值 -->
			<view class="_content_consumption_record" v-else-if="tabSelect === 3">
				<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 280px)'}">
					<view class="_content_consumption_record_item" v-for="item in consumptionRecordList" :key="item.id" v-if="consumptionRecordList && consumptionRecordList.length !==0">
						<view class="">
							<view class="_record_item_title">{{$t('common.order')}}{{item.rechargeNo}}</view>
							<view class="_record_item_value">{{formatDate(item.ctdate)}}</view>
						</view>
						<view>
							<view class="_record_item_title">
								<text>{{item.amount}}</text>
								<text>USDT</text>
							</view>
							<view class="_record_item_value _record_item_value_right">{{$t('common.fee')}}{{item.systemFee}}USD</view>
						</view>
					</view>
					<view v-else class="not_data_warp">
						 <up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
						 <view class="not_data_msg_warp">{{$t('details.historical.details.no')}}</view>
					</view>
					<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
				</scroll-view>
			</view>
			<!-- 余额记录 -->
			<view class="_content_consumption_record" v-else-if="tabSelect === 4">
				<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 280px)'}">
					<view class="_content_consumption_record_item" v-for="item in consumptionRecordList" :key="item.id" v-if="consumptionRecordList && consumptionRecordList.length !==0">
						<view class="">
							<view class="_record_item_title">{{item.remark}}</view>
							<view class="_record_item_value">{{formatDate(item.ctdate)}}</view>
						</view>
						<view>
							<view class="_record_item_title">
								<text>{{item.amount}}</text>
								<text>USDT</text>
							</view>
							<view class="_record_item_value _record_item_value_right">{{getValue(BALANCE_TRANSACTION_TYPE,item.type)}}</view>
						</view>
					</view>
					<view v-else class="not_data_warp">
						 <up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
						 <view class="not_data_msg_warp">{{$t('details.historical.details.no')}}</view>
					</view>
					<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
				</scroll-view>
			</view>
			<view class="_content_consumption_record" v-else>
				<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 280px)'}">
					<view class="_content_consumption_record_item" v-for="item in consumptionRecordList" :key="item.id" v-if="consumptionRecordList && consumptionRecordList.length !==0">
						<view class="">
							<view class="_record_item_title">{{$t('common.order')}}{{item.orderNo}}</view>
							<view class="_record_item_value">{{formatDate(item.createTime)}}</view>
						</view>
						<view>
							<view class="_record_item_title">
								<text>{{item.transAmount}}</text>
								<text>USD</text>
							</view>
							<view class="_record_item_value _record_item_value_right">{{getValue(TRANS_STATUS,item.transStatus)}}</view>
						</view>
					</view>
					<view v-else class="not_data_warp">
						 <up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
						 <view class="not_data_msg_warp">{{$t('details.historical.details.no')}}</view>
					</view>
					<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header_comm3.vue';
	import CardComm from '@/components/card_comm.vue';
	import { getUserRechargeList,getCardTradeList,getCardRechargeList,getAccountFlows } from '@/api/finance.js';
	import { getMyCards } from '@/api/card.js';
	import { formatDate } from '@/utils/index.js';
	import { getValue,BALANCE_TRANSACTION_TYPE,CARD_TYPE,TRANS_STATUS,RECHARGE_STATUS } from '@/utils/enumUtils.js'
	
	export default {
		components:{Header,CardComm},
		computed: {
		    getValue() {
		      return getValue;
		    },
		    BALANCE_TRANSACTION_TYPE() {
		      return BALANCE_TRANSACTION_TYPE;
		    },
			CARD_TYPE() {
		      return CARD_TYPE;
		    },
			TRANS_STATUS() {
		      return TRANS_STATUS;
		    },
			RECHARGE_STATUS() {
		      return RECHARGE_STATUS;
		    },
		},
		data() {
			return {
				tabSelect:1,// 1：消费记录 2：卡片充值 3：余额记录
				tabList:[
					{
						id:1,
						name:this.$t('mine.transaction.details.tab1'),
					},{
						id:2,
						name:this.$t('mine.transaction.details.tab2'),
					},{
						id:3,
						name:this.$t('mine.transaction.details.tab3'),
					},{
						id:4,
						name:this.$t('mine.transaction.details.tab4'),
					},
				],
				selectCard:{},// 选中的卡片
				consumptionRecordList:[],
				form:{
					page:1,
					pageSize:10,
				},
				loading:false,
			};
		},
		mounted() {
			this.loadData();
		},
		methods: {
			formatDate,
			getSelectCard(item){
				this.consumptionRecordList = [];
				this.selectCard = item
				this.form.page = 1;
				this.loadData(); // 加载更多数据
			},
			// 开卡
			checkTab(key){
				this.tabSelect = key;
				this.consumptionRecordList = [];
				this.form.page = 1;
				this.loadData(); // 加载更多数据
			},
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
			// 加载数据的方法
			async loadData() {
			  if (this.loading) return; // 如果正在加载，则不重复加载
			  const tabSelect = this.tabSelect;
			  const selectCard = this.selectCard;
			  if([1,2].includes(tabSelect) && (!selectCard || Object.keys(selectCard).length === 0)){
			  		return;
			  }
			  this.loading = true; // 设置加载状态为true
			  try {
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				if(newData.entitys && newData.entitys.length !==0){
					this.consumptionRecordList = [...this.consumptionRecordList, ...newData.entitys]; // 将新数据添加到列表中
					this.form.page++; 
				}
			  } catch (error) {
				console.error('加载数据失败:', error);
			  } finally {
				this.loading = false; // 设置加载状态为false
			  }
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData(page, pageSize) {
				const tabSelect = this.tabSelect;
				const selectCard = this.selectCard;
				const params = {
					page,
					pageSize,
				}
				if([1,2].includes(tabSelect)){
					params.cardId = selectCard.id;
				}
				
				let resp = {};
				// 消费记录
				if(tabSelect === 1){
					resp = await getCardTradeList(params);
				}else if(tabSelect === 2){// 卡片充值
					resp = await getCardRechargeList(params);
				}else if(tabSelect === 3){// 余额充值
					resp = await getUserRechargeList(params);
				}else if(tabSelect === 4){// 余额记录
					resp = await getAccountFlows(params);
				}
				console.log("resprespresp",resp);
				if(resp && resp.bizcode === 100 && resp.data){
					return resp.data;
				}else{
					return [];
				}
			},
			
		}
	}
</script>

<style lang="scss">
.transaction_details_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	background: #FFFFFF;
	color: #000000;
	.transaction_details_content{
		padding: 10rpx 30rpx;
		._details_content_header{
			background: #F3F3F3;
			border-radius: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			._content_header_item{
				width: 33%;
				text-align: center;
				font-weight: bold;
				font-size: 26rpx;
				color: #1F1E1E;
				padding: 20rpx 0;
			}
			._content_header_item_select{
				background: linear-gradient(95deg, #191919 0%, #363636 100%);
				border-radius: 50rpx;
				color: #FFFFFF;
			}
		}
	}
	._details_content_info{
		background: #FFFFFF;
		// border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		height: calc(100vh - 314rpx);
		overflow: hidden;
		._content_info_title{
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}
		._content_info_title2{
			font-weight: bold;
			font-size: 26rpx;
			color: #666666;
			// margin-top: 30rpx;
		}
		
	}
}
</style>
